<template>
  <el-row class="w-100 p-3">
    <el-col>
      <el-form>
        <table border="1" class="WarnSetTable" width="100%" style="border:1px solid #132b91">
          <tr height="20">
            <td width="30%" align="right" style="padding-right:10px">* 区域名称:</td>
            <td style="padding:10px 10px">
              <el-tooltip class="item" :content="errors.first('areaName')" :value="errors.has('areaName')" :manual="true">
                <el-form-item style="margin:0" required :class="{'is-error':errors.has('areaName')}">
                  <el-input  placeholder="请输入内容" style="width:98%" size="small" v-model="area.Name" v-validate="'required|max:31'" name="areaName"></el-input>
                </el-form-item>
              </el-tooltip>
            </td>
          </tr>
          <tr height="20">
            <td width="30%" align="right" style="padding-right:10px">* 所属行政区:</td>
            <td style="padding:10px 10px">
              <el-tooltip class="item" :content="errors.first('regionName')" :value="errors.has('areaName')" :manual="true">
                <el-form-item class="mb-0"  required :class="{'is-error':errors.has('regionName')}">
                  <el-select class="w-100" size="small" v-model="area.regionName" v-validate="'required'" name="areaName">
                    <el-option label="新吴区" :value="1"></el-option>
                    <el-option label="滨湖区" :value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-tooltip>
            </td>
          </tr>
          <tr height="20">
            <td width="30%" align="right" style="padding-right:5px">* 养护单位：</td>
            <td style="padding:10px 10px">
              <el-tooltip class="item" :content="errors.first('Maintenance')" :value="errors.has('Maintenance')" :manual="true">
                <el-input placeholder="请输入内容" size="small" v-model="area.Maintenance" class="input-with-select" style="width:98%"  :class="{'is-error':errors.has('Maintenance')}" v-validate="'required|max:63'" name="Maintenance"></el-input>
              </el-tooltip>
            </td>
          </tr>
          <tr height="20">
            <td width="30%" align="right" style="padding-right:5px">* 负责人：</td>
            <td style="padding:10px 10px">
              <el-tooltip class="item" :content="errors.first('MaintenanceUser')" :value="errors.has('MaintenanceUser')" :manual="true">
                <el-input placeholder="请输入内容" size="small" v-model="area.MaintenanceUser" class="input-with-select" style="width:98%"
                 :class="{'is-error':errors.has('MaintenanceUser')}" v-validate="'required|max:44'" name="MaintenanceUser"></el-input>
              </el-tooltip>
            </td>
          </tr>
          <tr height="20">
            <td width="30%" align="right" style="padding-right:5px">* 联系电话：</td>
            <td style="padding:10px 10px">
              <el-tooltip class="item" :content="errors.first('MaintenancePhone')" :value="errors.has('MaintenancePhone')" :manual="true">
                <el-input placeholder="请输入内容" size="small" v-model="area.MaintenancePhone" class="input-with-select" style="width:98%"
                :class="{'is-error':errors.has('MaintenancePhone')}" v-validate="'required|phone'" name="MaintenancePhone"></el-input>
              </el-tooltip>
            </td>
          </tr>
        </table>
        <div class="d-flex" style="width:170px;margin:30px auto 0 auto">
          <el-button class="ur-btn ur-btn-primary w80" @click="save"><i class="iconfont icon-sure"></i>确定</el-button>
          <el-button class="ur-btn ur-btn-primary w80" @click.native="closeDialog"><i class="iconfont icon-close3"></i>取消</el-button>
        </div>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
  import { mapState } from 'vuex'
  import api from 'api/api'
  import fetch from 'api/fetch'
  export default {
    components: {},
    props: {
      area: {regionName:1},

    },
    data() {
      return {

      }
    },
    watch: {},
    computed: {},
    methods: {
      save() {
        this.$validator.validateAll().then((res) => {
          if (res) {
            let url = '/Region/Insert'
            if (this.area.Id) {
              url = '/Region/Update'
            }
            api.fetch(url, this.area).then(r => {
              if (r != '') {
                this.$message.success({showClose:true,message:'成功'});
                this.closeAreaDialog()
              }
            })
          }
        })
      },
      closeAreaDialog() {
        this.$emit('closeAreaDialog', false)
      }
    },
    created() {
    },
    mounted() {

    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
